import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TextInput, Switch, TouchableWithoutFeedback } from "react-native";
import CreateGroupView from "../message/createGroupView";
import AddressSelect from "./AddressSelect";
import  LinearGradient from 'react-native-linear-gradient';

export default class AddAddress extends Component{
  constructor(props) {
    super(props);
    this.popView=null;
    this.state={
      isOpen:false
    }
  }
  openAddressSelect(){
    this.popView.show({
      content:this._renderAddressSelect()
    },()=>{

    })
  }

  onSelectArea(area){
    console.log(area)
  }

  _renderAddressSelect(){
    return (
      <AddressSelect
        commitFun={(area) => this.onSelectArea(area)}
        dismissFun={() => {
          console.log('取消')
          this.popView.hide()
        }}
      />
    )
  }

  render(){
    return(
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <View style={styles.section}>
          <View style={styles.cell}>
            <Text style={styles.title}>收货人</Text>
            <TextInput style={styles.input} placeholder={'请填写收货人姓名'}></TextInput>
          </View>
          <View style={styles.cell}>
            <Text style={styles.title}>手机号码</Text>
            <TextInput style={styles.input} placeholder={'请填写收货人手机号'}></TextInput>
          </View>
          <TouchableWithoutFeedback onPress={this.openAddressSelect.bind(this)}>
            <View style={styles.cell}>
              <Text style={styles.title}>所在地区</Text>
              <View style={styles.input}>
                <Text style={{color:'#B7B7B7',fontSize:14,marginRight:9}}>请选择</Text>
                <Image style={{width:6,height:12}} source={require('../../img/arrow_right_icon.png')}></Image>
              </View>
            </View>
          </TouchableWithoutFeedback>
          <View style={styles.cell}>
            <Text style={styles.title}>详细地址</Text>
            <TextInput style={styles.input} placeholder={'请填写详细地址'}></TextInput>
          </View>
        </View>
        <View style={[styles.section,{marginTop:10}]}>
          <View style={styles.cell}>
            <Text style={styles.title}>设置默认地址</Text>
            <Switch trackColor={{ false: "#F6F6F6", true: "#E39354" }}
                    ios_backgroundColor="#B7B7B7"
                    onValueChange={(value)=>{this.setState({isOpen:value})}}
                    value={this.state.isOpen}></Switch>
          </View>
        </View>
        <LinearGradient style={styles.save} colors={['#e79c58','#f8da85']} start={{x:0,y:1}}>
          <Text style={styles.saveTitle}>保存</Text>
        </LinearGradient>
        <CreateGroupView ref={(popView)=>this.popView=popView}></CreateGroupView>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  section:{
    backgroundColor:'#fff',
    paddingHorizontal:15
  },
  cell:{
    flexDirection:'row',
    justifyContent:"space-between",
    alignItems:'center',
    height:50,
    borderBottomColor:'#F6F6F6',
    borderBottomStyle:'solid',
    borderBottomWidth:1
  },
  title:{
    color:'#1C1C1C',
    fontSize:14,
    width:100
  },
  input:{
    flex:1,
    height:50,
    marginLeft:10,
    textAlign:'right',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  save:{
    position:'absolute',
    bottom:37,
    height:44,
    borderRadius:22,
    left:24,
    right:24
  },
  saveTitle:{
    color:'#fff',
    fontSize: 15,
    fontWeight:'500',
    flex:1,
    lineHeight:44,
    textAlign:'center'
  }
})
